<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
})
const [startValue, endValue] = [0, 2]
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    top: '15%',
    left: '0%',
    right: '10%',
    bottom: '10%',
    containLabel: true,
  },
  legend: {
    // itemGap: 50,
    top: '1%',
    data: ['23.1-11', '22.1-11', '变化'],
    textStyle: {
      color: '#f9f9f9',
      borderColor: '#fff',
    },
  },
  // 控制显示几个柱子
  dataZoom: {
    show: false,
    startValue,
    endValue,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: false,
        lineStyle: {
          color: '#f9f9f9',
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: ['技术开发', '技术服务', '技术咨询', '技术转让', '技术许可'],
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      // max: 140,
      splitNumber: 7,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256',
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        // margin: 20,
        textStyle: {
          color: 'rgb(148,159,167)',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
    {
      type: 'value',
      // min: 0,
      // max: 140,
      splitNumber: 7,
      axisLine: {
        show: false,
      },
      axisLabel: {
        // margin: 20,
        textStyle: {
          color: 'rgb(148,159,167)',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
  ],
  series: [
    {
      name: '23.1-11',
      type: 'line',
      symbol: 'circle', //设定为实心点
      showAllSymbol: true,
      symbolSize: 7,
      smooth: true,
      itemStyle: {
        normal: {
          color: `#00CBFE`,
          lineStyle: {
            //线的颜色
            color: `#00CBFE`,
            width: 1.5,
          },
          areaStyle: {
            type: 'default',
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化度
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: 'rgba(1, 180, 255, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(1, 180, 255, 0.1)',
                },
              ]
            ),
          },
        },
      },
      data: props.data1,

      yAxisIndex: 0,
    },
    {
      name: '22.1-11',
      type: 'line',
      symbol: 'circle', //设定为实心点
      symbol: 'emptyCircle',
      showAllSymbol: true,
      symbolSize: 7,
      smooth: true,
      itemStyle: {
        normal: {
          color: `#FFDF04`,
          lineStyle: {
            //线的颜色
            color: `#FFDF04`,
            width: 1.5,
          },
          areaStyle: {
            type: 'default',
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化度
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: 'rgba(255, 223, 4, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(255, 223, 4, 0.1)',
                },
              ]
            ),
          },
        },
      },
      data: props.data2,

      yAxisIndex: 0,
    },
    {
      name: '变化',
      type: 'line',
      symbol: 'circle', //设定为实心点
      symbol: 'emptyCircle',
      showAllSymbol: true,
      symbolSize: 7,
      smooth: true,
      itemStyle: {
        normal: {
          color: `#FF8F1F`,
          lineStyle: {
            //线的颜色
            color: `#FF8F1F`,
            width: 1.5,
          },
          areaStyle: {
            type: 'default',
            //渐变色实现
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //变化度
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: 'rgba(255, 223, 4, 0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(255, 223, 4, 0.1)',
                },
              ]
            ),
          },
        },
      },
      data: props.data3,

      yAxisIndex: 1,
    },
  ],
}
// const option = {
//     // backgroundColor: {
//     //     type: 'linear',
//     //     x: 0,
//     //     y: 0,
//     //     x2: 1,
//     //     y2: 1,
//     //     colorStops: [{
//     //         offset: 0,
//     //         color: '#0f2c70' // 0% 处的颜色
//     //     }, {
//     //         offset: 1,
//     //         color: '#091732' // 100% 处的颜色
//     //     }],
//     //     globalCoord: false // 缺省为 false
//     // },
//     // title: {
//     //     text: '品种',
//     //     x: 'center',
//     //     y: 'center',
//     //     textStyle: {
//     //         color: '#fff'
//     //     }
//     // },
//     tooltip: {
//         trigger: 'item',
//         // borderColor: 'rgba(255,255,255,.3)',
//         // backgroundColor: 'rgba(13,5,30,.6)',
//         borderWidth: 1,
//         padding: 5,
//         formatter: function (parms) {
//             var str = parms.marker + "" + parms.data.name + "</br>" +
//                 "数量：" + parms.data.value + "</br>" +
//                 "占比：" + parms.percent + "%";
//             return str;
//         }
//     },
//     legend: {
//         // type: "scroll",
//         // orient: 'vertical',
//         // left: 'middle',
//         // align: 'auto',
//         // top: 'middle',
//         bottom: 'bottom',
//         width:'300px',
//         textStyle: {
//             color: '#fff'
//         },

//         data: ["未评价", "国内领先", "国际领先", "国际先进", "国内一般", "国内先进"]
//     },
//     series: [{
//         type: 'pie',
//         z: 3,
//         center: ['50%', '40%'],
//         radius: ['20%', '40%'],
//         clockwise: true,
//         avoidLabelOverlap: true,
//         hoverOffset: 15,
//         itemStyle: {
//             normal: {
//                 color: function (params) {
//                     return ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'][params.dataIndex]
//                 }
//             }
//         },
//         label: {
//             show: true,
//             position: 'outside',
//             formatter: '{a|{b}：{d}%}\n{hr|}',
//             normal: {
//                     // position: 'top',
//                     // fontSize: '24',
//                     color: '#D8D8D8',
//                 },
//             rich: {
//                 hr: {
//                     backgroundColor: 't',
//                     borderRadius: 3,
//                     width: 3,
//                     height: 3,
//                     padding: [3, 3, 0, -12]
//                 },
//                 a: {
//                     padding: [-30, 15, -20, 15]
//                 }
//             }
//         },
//         labelLine: {
//             normal: {
//                 length: 20,
//                 length2: 30,
//                 lineStyle: {
//                     width: 1
//                 }
//             }
//         },
//         data: [{
//             name: "未评价",
//             value: "142.0"
//         }, {
//             name: "国内领先",
//             value: "271.0"
//         }, {
//             name: "国际领先",
//             value: "44.0"
//         }, {
//             name: "国际先进",
//             value: "200.0"
//         }, {
//             name: "国内一般",
//             value: "32.0"
//         }, {
//             name: "国内先进",
//             value: "59.0"
//         }]
//     }, {
//         name: '第一层环',
//         type: 'pie',
//         z: 2,
//         tooltip: {
//             show: false
//         },
//         center: ['50%', '40%'],
//         radius: ['40%', '50%'],
//         hoverAnimation: false,
//         clockWise: false,
//         itemStyle: {
//             normal: {
//                 // shadowBlur: 40,
//                 // shadowColor: 'rgba(0, 255, 255,.3)',
//                 color: 'rgba(1,15,80,.4)',
//             },
//             emphasis: {
//                 color: 'rgba(1,15,80,.4)',
//             }
//         },
//         label: {
//             show: false
//         },
//         data: [100]
//     }, {
//         name: '第二层环',
//         type: 'pie',
//         z: 1,
//         tooltip: {
//             show: false
//         },
//         center: ['50%', '40%'],
//         radius: ['50%', '70%'],
//         hoverAnimation: false,
//         clockWise: false,
//         itemStyle: {
//             normal: {
//                 // shadowBlur: 40,
//                 // shadowColor: 'rgba(0, 255, 255,.3)',
//                 color: 'rgba(2,60,85,.2)',
//             },
//             emphasis: {
//                 color: 'rgba(2,60,85,.2)',
//             }
//         },
//         label: {
//             show: false
//         },
//         data: [100]
//     }]
// }
const chart = ref()
let timer1 = null
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
  // 使用定时器
  timer1 = setInterval(() => {
    // debugger;
    const item1 = props.data1.shift()
    props.data1.push(item1)
    const item2 = props.data2.shift()
    props.data2.push(item2)
    const item3 = props.data3.shift()
    props.data3.push(item3)
    // console.log('@props ', props)
    myChart.setOption({
      series: [
        {
          data: props.data1,
          type: 'line',
        },
        {
          data: props.data2,
          type: 'line',
        },
        {
          data: props.data3,
          type: 'line',
        },
      ],
      // xAxis: {
      //   type: 'category',
      //   data: props.xData,
      // },
    })
  }, 2000)
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
